import React, { Component } from 'react';
import { Card, Form, Input, Button, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import '../css/detail.css';
import LinkButton from './LinkButton';
import UploadPhotos from './UploadPhotos';
import MemoryUtils from '../utils/MemoryUtils';

const Item = Form.Item;

export default class AddGoods extends Component {
    state = {}
    constructor(props) {
        super(props);
        this.photoRef = React.createRef();
    }
    validatePrice = (rule, value, callback) => {
        if (value === '') {
            callback()
        } else if (value * 1 <= 0) {
            callback('价格必须大于0')
        } else {
            callback()
        }
    }
    componentWillMount() {
        this.goods = MemoryUtils.goods;
        this.isUpdate = !!this.goods.goods_id;
    }
    render() {
        const { isUpdate, goods } = this;
        const title = (
            <span>
                <LinkButton onClick={() => this.props.history.goBack()} ><ArrowLeftOutlined /></LinkButton>
                <span>{isUpdate ? '修改商品' : '添加商品'}</span>
            </span>
        )
        const formLayout = {
            labelCol: { span: 2 },
            wrapperCol: { span: 8 }
        }
        const onFinish = (values) => {
            if (goods.goods_id) {
                fetch('http://82.157.94.115:2005/updategoods', {
                    method: 'POST',
                    body: JSON.stringify({goods_id:goods.goods_id, ...values}),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(res => res.json())
                    .then(res => {
                        console.log(JSON.stringify({goods_id:goods.goods_id, ...values}));
                        message.success('商品信息修改成功！')
                    })
                    .catch(error => {
                        message.error('商品信息修改失败！')
                    })
            } else {
                fetch('http://82.157.94.115:2005/insertgoods', {
                    method: 'POST',
                    body: JSON.stringify(values),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(res => res.json())
                    .then(res => {
                        message.success('商品添加成功！')
                        this.props.history.goBack()
                    })
                    .catch(error => {
                        message.error('商品添加失败！')
                    })
                
            }
        }
        return (
            <div>
                <Card title={title} >
                    <Form {...formLayout} onFinish={onFinish} initialValues={goods}>
                        <Item
                            label="商品名称"
                            name="goods_name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入商品名称',
                                },
                            ]}
                        >
                            <Input placeholder='商品名称'></Input>
                        </Item>
                        <Item
                            label="商品描述"
                            name="goods_title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入商品描述',
                                },
                            ]}
                        >
                            <Input placeholder='商品描述'></Input>
                        </Item>
                        <Item
                            label="商品价格"
                            name="goods_price"
                            rules={[
                                { required: true, message: '请输入商品价格' },
                                { validator: this.validatePrice },
                            ]}
                        >
                            <Input type='number' placeholder='商品价格' addonBefore='￥'></Input>
                        </Item>
                        <Item label="商品图片">
                            <UploadPhotos ref={this.photoRef} img={goods.goods_img}/>
                        </Item>
                        <Item>
                            <Button type='primary' htmlType='submit'>提交</Button>
                        </Item>
                    </Form>
                </Card>
            </div>
        )
    }
}
